<template>
  <div class="cancel">
    <div class="top">
      <div class="rect"></div>
      <div class="name">请求SD-SW</div>
    </div>
    <!-- 请求取消 -->
    <div class="forms">
      <el-form ref="form" :model="form" label-width="130px" :disabled='true' >
        <el-row>
          <el-col :span="6">
            <el-form-item label="交易流水号" :required='true'>
              <el-input v-model="form.tradenum"  ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银联单号" >
              <el-input v-model="form.menbernum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- ---------- -->
      <div class="module" style="font-weight: 600; margin-top: 30px">
        联系信息集合
      </div>
      <el-divider></el-divider>
      <el-form ref="form" :model="form" label-width="130px" :disabled='true'>
        <el-row>
          <el-col :span="6">
            <el-form-item label="联系人姓名" :required='true'>
              <el-input v-model="form.contact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式" :required='true'>
              <el-input v-model="form.tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="top">
        <div class="rect"></div>
        <div class="name">应答SD-SW</div>
      </div>
      <el-form ref="form" :model="form" label-width="130px" :disabled='true'>
        <el-row>
          <el-col :span="6">
            <el-form-item label="银联单号" :required='true'>
              <el-input v-model="formres.banknum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回码" :required='true'>
              <el-input v-model="formres.systemesnum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统返回说明" :required='true'>
              <el-input v-model="formres.systemdesc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form" :model="form" label-width="130px" :disabled='true'>
        <el-row>
          <el-col :span="6">
            <el-form-item label="系统返回时间" :required='true'>
              <el-input v-model="formres.syetemtime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报送时间" :required='true'>
              <el-input v-model="formres.syetemsubmittime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- ---返回按钮 -->
      <div class="btnbox">
        <el-button type="primary" icon="el-icon-d-arrow-left" @click='back()'>返回</el-button>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      form: {
        tradenum:'MMDD123456789012',
        banknum: "/",
         contact:"xxx",
        tel:"13202003231"
      },
       formres:{
        banknum:'MMDD123456789012',
        systemesnum:'0000',
        systemdesc:'0000',
        syetemtime:'',
        syetemsubmittime:''
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
     back(){
        this.$eventBus.$emit("zipao")
      
    }
  },
};
</script>

<style lang='scss' scoped>

.cancel{
  
.top {
  background: #d6e4ff;
  display: flex;
  padding: 8px 0 8px 0;
  margin-bottom: 20px;
  .rect {
    height: 16px;
    width: 4px;
    background-color: #007aff;
    margin-right: 20px;
  }
  .name {
    font-size: 14px;
  }
}
.forms {
  height: 100%;
  width: 100%;
  .btnbox {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
}

</style>